<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜谱管理</el-breadcrumb-item>
      <el-breadcrumb-item>回收站</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
          <el-table :data="tableData.filter(data => !search || data.mtitle.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column label="ID" prop="menuid">
            </el-table-column>
            <el-table-column label="菜单标题" prop="mtitle">
            </el-table-column>
            <el-table-column label="菜单图片" prop="mimg">
              <template slot-scope="scope">
              	<el-image style="width: 90px; height: 80px" :src="scope.row.mimg">
              	</el-image>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot="header" slot-scope="scope">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
              </template>
              <template slot-scope="scope">
                <!-- 恢复按钮 -->
                <el-tooltip effect="dark" content="恢复" placement="top" :enterable="false">
                  <el-button size="mini" type=""  @click="handleBack(scope.$index, scope.row)"><i class="el-icon-refresh"></i></el-button>
                </el-tooltip>
                <!--永久删除按钮-->
                <el-tooltip effect="dark" content="永久删除" placement="top" :enterable="false">
                  <el-button size="mini" type=""  @click="handleRemove(scope.$index, scope.row)"><i class="el-icon-delete-solid"></i></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

      <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>

    <!--恢复或删除对话框-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span v-show="junp==1">确定要恢复<span id="menuSpan" v-model="menuRow">{{menuRow.mtitle}}</span>这条菜谱吗？</span>
      <span v-show="junp==2">确定要永久删除<span id="menuSpan" v-model="menuRow">{{menuRow.mtitle}}</span>这条菜谱吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Rows">确 定</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script src="../js/MenuRecycle.js"></script>

<style>
</style>
